
import { useState } from 'react';
import { getData5 } from '../Data'

import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";
import { Selector } from "@grapecity/wijmo.grid.selector";
import { CollectionView, PropertyGroupDescription } from "@grapecity/wijmo";
import { HeadersVisibility } from "@grapecity/wijmo.grid";
import { useMount, useReactive } from 'ahooks';

import { Switch } from "antd"

const WijmoG03 = () => {

    const InitData = useReactive({
        init: null,
        selector: null,
        grouped: true,
        headers: true,
        selectedItems: [],

    })

    const [Data, setData] = useState()
    useMount(() => { setData(new CollectionView(getData5(100))) })

    const init = (init) => {
        InitData.init = init
        setGroups(true)
        InitData.selector = new Selector(init, { itemChecked: () => { InitData.selectedItems = init.rows.filter(r => r.isSelected) } });
    }

    const setGroups = (e) => {
        let groups = Data.groupDescriptions
        groups.clear()
        if (e) groups.push(new PropertyGroupDescription('country'), new PropertyGroupDescription('product'))
        InitData.grouped = e
    }

    const setHeaders = (e) => {
        let theGrid = InitData.selector.column.grid
        theGrid.headersVisibility = e ? HeadersVisibility.All : HeadersVisibility.Column
        InitData.selector.column = e ? theGrid.rowHeaders.columns[0] : theGrid.columns[0]
        InitData.headers = e
    }

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid
                    deferResizing={true}
                    showMarquee={true}
                    alternatingRowStep={0}
                    itemsSource={Data}
                    initialized={init}
                >
                    <FlexGridColumn binding="id" header="ID" isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" />
                    <FlexGridColumn binding="product" header="Product" />
                    <FlexGridColumn binding="discount" header="Discount" format="p0" />
                    <FlexGridColumn binding="downloads" header="Downloads" />
                    <FlexGridColumn binding="sales" header="Sales" />
                    <FlexGridColumn binding="expenses" header="Expenses" />
                </FlexGrid>
                <div>选中数量 : {InitData.selectedItems.length}</div>

                <div>分组 : <Switch defaultChecked={InitData.grouped} onChange={setGroups} /> </div>
                <div>多选 : <Switch defaultChecked={InitData.headers} onChange={setHeaders} /> </div>


            </div>
        );
    }


};

export default WijmoG03